<template>
  <page-header-wrapper>
    <a-card>
      <a-tabs default-active-key='1' @change='changeType'>
        
        <a-tab-pane
          style='margin-top: 40px;'
          key='1'
          tab='普通文本邮件'>
          <a-form
            :form='form'
            :label-col='{ span: 6 }'
            :wrapper-col='{ span: 12 }'>
            
            <a-form-item label='收件人邮箱'>
              <a-select
                :loading='selectOptionsLoading'
                mode='multiple'
                v-decorator="['tos', { rules: [{ required: true, message: '收件人邮箱不能为空' }] }]"
                placeholder='请输入或选择收件人邮箱'>
                
                <div slot='dropdownRender' slot-scope='menu'>
                  <v-nodes :vnodes='menu' />
                  <a-divider style='margin: 4px 0;' />
                  <div style='padding: 8px 8px; cursor: pointer;' @mousedown='e => e.preventDefault()'>
                    <a-space>
                      <a-button size='small' type='primary' @click='selectAll'>全选</a-button>
                      <a-button size='small' @click='clearAll'>清空</a-button>
                    </a-space>
                  </div>
                </div>
                
                <a-select-option
                  v-for='item in systemEmailList'
                  :value='item.email'
                  :key='item.email'>
                  {{ item.email + ' (' + item.nickName + ')' }}
                </a-select-option>
              
              </a-select>
            </a-form-item>
            
            <a-form-item label='主题'>
              <a-input
                placeholder='请输入主题'
                v-decorator="['subject', { rules: [{ required: true, message: '主题不能为空' }] }]"
              />
            </a-form-item>
            
            <a-form-item label='正文'>
              <a-textarea
                placeholder='请输入正文'
                :autoSize='{ minRows: 5, maxRows: 10 }'
                v-decorator="['content', { rules: [{ required: true, message: '正文不能为空' }] }]">
              </a-textarea>
            </a-form-item>
            
            <a-row type='flex' justify='end'>
              <a-col :span='18'>
                <a-form-item>
                  <a-space>
                    
                    <a-popover title='注意'>
                      <template slot='content'>
                        <p>附件大小不能超过
                          <a-tag color='red'>5M</a-tag>
                        </p>
                        <p>支持以下格式</p>
                         <p style='width: 500px;'>
                           <a-tag
                             style='margin-bottom: 5px;'
                             color="blue"
                             v-for='type in fileSupportType'
                             :key='type'>
                             {{type}}
                           </a-tag>
                         </p>
                      </template>
                      <a-button size='small'>添加附件</a-button>
                    </a-popover>
                    
                    <a-button size='small'>定时发布</a-button>
                  </a-space>
                </a-form-item>
              </a-col>
            </a-row>
            
            <a-row type='flex' justify='end'>
              
              <a-button
                style='margin-left: 15px;margin-right: 15px;'
                @click='() => this.form.resetFields()'>
                重置
              </a-button>
              
              <a-col :span='7'>
                <a-popconfirm
                  ok-text='确认'
                  placement='right'
                  cancel-text='取消'
                  @confirm='confirm'
                  @cancel='cancel'>
                  <template slot='title'>
                    <p>确认发布此次消息?</p>
                    <p>一经发布不能修改不能撤回</p>
                  </template>
                  <a-button
                    type='primary'>
                    发布
                  </a-button>
                </a-popconfirm>
              </a-col>
            </a-row>
          
          </a-form>
        </a-tab-pane>
        
        <a-tab-pane
          style='margin-top: 40px;'
          key='2'
          tab='HTML格式邮件'
          :force-render='false'>
          <a-form
            :form='form'
            :label-col='{ span: 6 }'
            :wrapper-col='{ span: 12 }'>
  
            <a-form-item label='收件人邮箱'>
              <a-select
                :loading='selectOptionsLoading'
                mode='multiple'
                v-decorator="['tos', { rules: [{ required: true, message: '收件人邮箱不能为空' }] }]"
                placeholder='请输入或选择收件人邮箱'>
      
                <div slot='dropdownRender' slot-scope='menu'>
                  <v-nodes :vnodes='menu' />
                  <a-divider style='margin: 4px 0;' />
                  <div style='padding: 8px 8px; cursor: pointer;' @mousedown='e => e.preventDefault()'>
                    <a-space>
                      <a-button size='small' type='primary' @click='selectAll'>全选</a-button>
                      <a-button size='small' @click='clearAll'>清空</a-button>
                    </a-space>
                  </div>
                </div>
      
                <a-select-option
                  v-for='item in systemEmailList'
                  :value='item.email'
                  :key='item.email'>
                  {{ item.email + ' (' + item.nickName + ')' }}
                </a-select-option>
    
              </a-select>
            </a-form-item>
            
            <a-form-item label='主题'>
              <a-input
                placeholder='请输入主题'
                v-decorator="['subject', { rules: [{ required: true, message: '主题不能为空' }] }]"
              />
            </a-form-item>
            
            <a-tooltip>
              <template slot='title'>
                支持样式, 链接, 图片, 动画
              </template>
              <a-form-item label='正文' :label-col='{ span: 6 }'>
                
                <BaseIDE code-mode='htmlmixed'
                         :ide-font-size='18'
                         style='font-weight: 580;'
                         :ide-height="'200px'"
                         v-decorator="['content', { rules: [{ required: true, message: '通知内容不能为空或为模板内容' }] }]"
                         codeTemplate="<h3 style='color:red'>重要通知</h3>
<p>明天我请大家吃饭, 请大家注意</p>
"
                         @getCodeAnswer='getNotice' />
              </a-form-item>
            
            </a-tooltip>
            
            <a-row type='flex' justify='end'>
              <a-col :span='18'>
                <a-form-item>
                  <a-space>
                    <a-tooltip>
                      <template #title>
                        附件大小不能超过5M
                      </template>
                      <a-button size='small'>添加附件</a-button>
                    </a-tooltip>
                    <a-button size='small'>定时发布</a-button>
  
  
                    <a-popover title='格式查看'>
                      <template slot='content' style='width: 500px;'>
                        <p v-html='form.getFieldsValue(["content"]).content'></p>
                      </template>
                      <a-button size='small' type='dashed'>内容查看</a-button>
                    </a-popover>
                  </a-space>
                </a-form-item>
              </a-col>
            </a-row>
            
            <a-row type='flex' justify='end'>
              
              <a-button
                style='margin-left: 15px;margin-right: 15px;'
                @click='() => this.form.resetFields()'>
                重置
              </a-button>
              
              <a-col :span='7'>
                <a-popconfirm
                  ok-text='确认'
                  placement='right'
                  cancel-text='取消'
                  @confirm='confirm'
                  @cancel='cancel'>
                  <template slot='title'>
                    <p>确认发布此次消息?</p>
                    <p>一经发布不能修改不能撤回</p>
                  </template>
                  <a-button
                    type='primary'>
                    发布
                  </a-button>
                </a-popconfirm>
              </a-col>
            </a-row>
          
          </a-form>
        </a-tab-pane>
      
      </a-tabs>
    </a-card>
  </page-header-wrapper>
</template>

<script>

import BaseIDE from '@/views/reply/components/BaseIDE.vue'
import { getSystemEmail, sendAllEmail } from '@/api/notice'

export default {
  name: 'Mail',
  components: {
    BaseIDE,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  data() {
    return {
      emailType: 'text',
      selectEmail: [],
      selectOptionsLoading: false,
      form: this.$form.createForm(this, { name: 'mailForm' }),
      fileSupportType: ['bmp', 'gif', 'jpg', 'jpeg', 'png', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'html', 'htm', 'txt', 'rar', 'zip', 'gz', 'bz2', 'mp4', 'avi', 'rmvb', 'pdf'],
      systemEmailList: []
    }
  },
  created() {
    this.getEmail()
  },
  methods: {
    getEmail(){
      // 获取系统用户所有邮箱号
      getSystemEmail().then(response => {
        this.systemEmailList = response.data
      })
    },
    // 确认发布
    confirm(e) {
      e.preventDefault()
      let _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          values.type = _this.emailType
          // 发送请求
          sendAllEmail(values).then(() => {
            this.$message.success("发送成功")
          })
        }
      })
    },
    
    // 取消发布
    cancel(e) {
      this.$message.error('取消发布')
    },
    
    
    // 邮箱全择
    selectAll() {
      const arr = [];
      (this.systemEmailList).forEach(item => {
        arr.push(item.email)
      })
      this.form.setFieldsValue({
        tos: arr
      })
    },
    
    // 邮箱全取消
    clearAll() {
      this.form.setFieldsValue({
        tos: []
      })
    },
    
    // 改变标签页时
    changeType(key) {
      // 类型赋值
      this.emailType = key === '1' ? 'text' : 'html'
    },
    getNotice(content) {
      // 实时赋值
      this.form.setFieldsValue({
        'content': content,
        'type': 'html'
      })
    }
  }
}
</script>

<style scoped>

</style>